<template>
  <div class="home">
    <div class="menu">


      <div class="div1">
        <!-- <el-text tag="b" size="large">首页</el-text> -->
        <el-switch v-model="isCollapse" size="large" style="   --el-switch-off-color: #13ce66" :active-value="false" :inactive-value="true" inline-prompt active-text="首页" inactive-text="首页" />
      </div>

      <el-menu :default-active="route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
        <el-menu-item index="/home/file" @click="goTo('/home/file')">
          <el-icon><i-ep-Folder /></el-icon>
          <span>我的文件</span>
        </el-menu-item>
        <el-menu-item index="/home/upload" @click="goTo('/home/upload')">
          <el-icon><i-ep-Upload /></el-icon>
          <span>上传文件</span>
        </el-menu-item>
        <el-menu-item index="/home/seachfile" @click="goTo('/home/seachfile')">
          <el-icon><i-ep-Search /></el-icon>
          <span>查找分享文件</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="Home">
import { RouterView, useRoute } from 'vue-router'
import { useGoTo } from '@/hooks/useGoTo';
const route = useRoute();
// import { useStore } from 'vuex';
import { useUserStore } from '@/stores/userStore';
const store = useUserStore();

const userInfo = computed(() => store.user);

const { goTo } = useGoTo()

const isCollapse = ref(false)

onMounted(() => {
  if (userInfo.value) {
    goTo('/home/file')
  } else {
    goTo('/user/login')
  }
})
</script>

<style scoped>

.home {
  display: flex;
  margin-top: 50px;

}


.menu {
  flex: 2;
  display: flex;
  flex-direction: column;
  /* align-items: center;   */
}

.main-content {
  flex: 8;
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}


.div1 {
margin-left: 10px;
 margin-bottom: 30px; 
}
</style>
